<template>
  <div class="bg-white sticky top-0 left-0 w-full z-10 dark:z-zinc-800">
    <ul>
      <div
        class="w-[800px] relative flex flex-wrap justify-center overflow-x-auto px-[10px] py-1 text-xs text-zinc-600 duration-300 overflow-hidden mx-auto"
        :class="[isOpenCategray ? 'h-[206px]' : 'h-[56px]']"
      >
        <!-- 下展箭头 -->
        <div
          class="absolute right-1 bottom-1 z-20 p-1 rounded cursor-pointer duration-200 hover:bg-zinc-200 dark:hover:bg-zinc-900"
          @click="triggerState"
        >
          <m-svg-icon
            :name="isOpenCategray ? 'fold' : 'unfold'"
            class="w-1 h-1"
            fillClass="fill-zinc-900 dark:fill-zinc-300"
          ></m-svg-icon>
        </div>
        <li
          v-for="(item, index) in $store.getters.category"
          :key="item.id"
          :class="{
            'text-zinc-900 bg-zinc-200 dark:text-zinc-300 dark:bg-zinc-900':
              $store.getters.currentCategorysIndex === index
          }"
          class="shrink-0 px-1.5 py-0 z-10 duration-200 last:mr-4 text-base font-bold h-4 leading-4 cursor-pointer hover:bg-zinc-200 rounded mr-1 mb-1 dark:text-zinc-500 dark:hover:text-zinc-300 dark:hover:bg-zinc-900"
          @click="setCurrentCategory(item)"
        >
          {{ item.name }}
        </li>
      </div>
    </ul>
  </div>
</template>
<script setup>
import { ref } from 'vue'
import { useStore } from 'vuex'
const store = useStore()
const isOpenCategray = ref(false)
const triggerState = () => {
  isOpenCategray.value = !isOpenCategray.value
}

const setCurrentCategory = (item) => {
  store.commit('app/setCurrentCategorys', item)
}
</script>
